首页手记 jQuery入门

jQuery入门

标签：

JQuery

Paste_Image.png

jQuery是一个javascript库，它可以方便的选取HTML元素，并改变CSS样式，同时执行酷炫的动画。如何jQuery的设计初衷一样：write less, do more

在学习jQuery之前，需要对HTML、CSS和JavaScript有基本的了解，这不在本文的讨论范围之内，你可以在网上找各种教程和资料来学习。推荐菜鸟教程

01 jQuery选择器

jQuery可以选择HTML元素来改变他们的样式或者增加动画效果。jQuery选择器的基本格式为：$(selector).action()。$(selector)是选中的HTML元素，action是对选中的元素进行的动作。

通过HTML标签选择

比如选择HTML所有标签为p的元素，也就是段落，语法为$("p")

通过类class选择

比如选择类为color的元素，语法为$(".color")

通过id选择

比如选择id为name的元素，语法为$("#name")

此外，$("*")表示选中所有元素，$(this)表示选取当前HTML元素。
$(".button")表示选中button元素和type为button的input元素，而$("button")仅能选中button元素。

02 jQuery事件

jQuery事件是和用户的交互，用户用鼠标或键盘对文档元素做不同的操作，文档会根据操作渲染出不同的视图。主要事件有：

鼠标事件	键盘事件	表单事件	文档事件
click	keypress	submit	load
dbclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

此外，还有一些比较常用的事件

$(document).ready()

$(document).ready是文档就绪事件，它让我们在文档完全加载完后才能对元素进行操作。

hover

hover事件用于模拟光标悬停事件，光标移动到元素上会发出mouseenter事件，光标离开元素会触发mouseleave事件。

03 jQuery动画

jQuery支持动画效果，可以让你的网页更加生动有趣。

hide / show / toggle

支持元素的隐藏和显示，toggle切换hide和show。都支持可选的参数：hide(speed, callback) show(speed, callback) toggle(speed, callback)。其中speed参数是动画的时间，即隐藏/显示的速度，callback是回调函数。比如$("p").show(1000, foo)的效果是：p元素用1秒的时间显示完成后，执行回调函数foo。

fadeIn / fadeOut / fadeToggle / fadeTo

fadeIn用来淡入已经隐藏的元素，fadeOut用来淡出已经显示的元素，fadeToggle用来切换fadeIn和fadeOut的效果，它们的方法都类似于：fadeIn(speed, callback),参数说明和上一小节类似。
fadeTo则可以指定渐变到哪个透明度，方法为：fadeTo(speed, opacity, callback),opacity的值为0到1之间。

slideUp / slideDown / slideToggle

slideUp用来元素的向上滑动，slideDown用来元素的向下滑动，slideToggle用来在up和down之间切换。方法和参数的说明和上一小节类似：slideUp(speed, callback)

animate

animate用于创建自定义动画。方法为：animate({params}, speed, callback) , 参数speed和callback的意义和之前一样，params定义成动画的CSS属性。你可以在params中定义多个属性：

$("p").animate(
  { 
    left:250px,    opacity:0.5,    height:250px,    width:150px
  }
)

stop

stop用来停止正在进行的动画和效果。

04 jQuery HTML

jQuery拥有操作DOM的能力，可以读取/修改HTML元素的内容。

读取HTML元素内容

text()获取元素内容

比如$("p").text()获取段落p的内容

html()获取元素的html内容，包括html标签

比如$("p").html()获取段落p的html 内容

val()获取表单内容

比如$("#test").val()获取id为test的表单内容

设置HTML元素内容

很简单，只要在text()或html()或val()括号内填入你要设置的值，就能修改选中元素的内容。比如：$("p").text("Hello world!").那么段落p的内容就变成了 Hello world!

添加 / 删除元素

append / prepend

append用于在选中元素的尾部插入元素
prepend在选中元素的头部插入元素

after / before

after用于选中元素之后插入元素
before在选中元素之前插入元素

append和after的区别在于append是在元素内，而after是在元素外，prepend和before的区别也是如此

remove / empty

remove用于删除被选元素及其子元素
empty从被选元素中删除子元素，保留被选元素

CSS类

addClass / removeClass / toggleClass

addClaass用于在选中元素上添加一个类
removeClass用于在选中元素上删除一个类
toggleClass用于在选中元素上添加和删除类的切换操作

css()

css()方法用于读取或设置选中元素的css样式。
$("p").css("background-color") 返回元素p的背景颜色
$("p").css("background-color", "yellow")设置元素p的背景颜色为黄色
$("p").css("background-color": "yellow", "height": 100px)设置元素p的多个css属性

05 jQuery遍历

jQuery对元素的遍历是根据DOM(文档对象模型)而建立的。

Paste_Image.png

图解：

div是ul的父元素，ul是div的子元素
ul有两个子元素li，两个子元素是同胞
祖先是父、祖父或曾祖父等等
后代是子、孙或曾孙等等
遍历祖先

方法	说明
parent	返回该元素的直接父元素
parents	返回该元素的祖先
parentsUntil	返回介于两个给定元素之间的祖先

遍历后代

方法	说明
children	返回该元素的直接子元素
find	find("*")返回该元素的所有后代

遍历同胞

方法	说明
sblings	返回所有的同胞元素
next	返回下一个同胞元素
prev	返回上一个同胞元素
nextAll	返回接下来所有的同胞元素
prevAll	返回之前所有的同胞元素
nextUntil	返回两个给定元素之间的同胞元素
prevUntil	返回两个给定元素之间的同胞元素

遍历过滤

方法	说明
first	选中被选所有元素的第一个元素
last	选中被选所有元素的最后一个元素
eq	eq(1)选中被选所有元素的第二个元素，索引从0开始
filter	匹配元素，比如filter(".name")选中name class类
not	不匹配元素，比如not(".name")选中非name class类